<!--
shallowRef 浅引用
1. 作用: 创建一个响应式数据, 但只对顶层属性进行响应式处理.
2. 用法: let MyVar = shallowRef(initialValue);
3. 特点: 只跟踪引用值的变化, 不关心值内部的属性变化;

shallowReactive
1. 作用: 创建一个千层响应式对象, 只会使对象的最顶层属性变成响应式的, 对象内部的嵌套属性不会变成响应式的.
2. 用法:
	const myObj = shallowReactive({...});
3. 特点: 对象的顶层属性是响应式的, 但嵌套对象的属性不是.

总结
通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应. 浅层式 API 创建的状态只在其顶层是响应式的,
对所有深层的对象不会做任何处理, 避免了对每一个内部属性左响应式所带来的性能成本, 这使得属性的访问变得更快,
可提升性能.
-->
<template>
	<div class="app">
		<h2>求和为: {{ sum }}</h2>
		<h2>名字为: {{ person.name }}</h2>
		<h2>年龄为: {{ person.age }}</h2>
		<h2>汽车为: {{ car }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改整个人</button>
		<span>|</span>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeEngine">修改发动机</button>

	</div>
</template>

<script setup lang="ts" name="App">
/**
 * @name: App
 * @author: chuanshen
 * @version: 2024-08
 */

import { ref, shallowRef, reactive, shallowReactive} from 'vue'

let sum = shallowRef(0)
let person = shallowRef({
	name: '张三',
	age: 18
})
let car = shallowReactive({
	barnd: '奔驰',
	options: {
		color: '红色',
		engine: 'V8'
	}
})

function changeSum() {
	sum.value += 1
}

function changeName() {
	person.value.name = '李四'
}

function changeAge() {
	person.value.age += 1
}

function changePerson() {
	person.value = {
		name: 'Tony',
		age: 100
	}
}

/* ********************* */

function changeBrand() {
	car.barnd = '宝马'
}

function changeColor() {
	car.options.color = '紫色'
}

function changeEngine() {
	car.options.engine = 'V12'
}

</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}
button {
	margin: 0 5px;
}
</style>